<!-- 请假申请 -->
<template>
	<view style="height: 100vh;">
		<!-- <scroll-view scroll-y="true" style="height: calc(100% - 90rpx);"> -->
		<view style="height: calc(100% - 90rpx); overflow-y: auto;">
			<view style="overflow: hidden;">
				<!-- 温馨提示 -->
				<view style="margin-bottom: 30rpx;" class="hintRow" v-if="!punchId">
					温馨提示:提交审批后,将由上级领导进行审批!
				</view>
				<view class="bottomBar" style="margin-top: 50rpx;">
					<view style="color: #007aff;" v-if="!punchId">请假申请</view>
					<view @click="goHistoryPage" v-if="!punchId">申请记录</view>
					<step-log
						class="step"
						v-if="punchId"
						:statusDetails="addFormData.final_status"
						:approvalLog="addFormData.appproval_log"
					></step-log>
				</view>
				<!-- 请假理由 -->
				<view class="formItem" style="margin-top: 20rpx;">
					<view class="leftLable">
						<text class="red">*</text>
						<text>请假事由</text>
					</view>
					<view class="rightInput">
						<picker
							mode="selector"
							:range="reasonsLisr"
							:value="reasons"
							:disabled="punchId && addFormData.is_edit != 1"
							@change="bindResonsChange"
						>
							<view v-if="!reasons" class="emptyReason">
								<text style="color: #999;">请选择请假类型</text>
								<uni-icons
									style="margin-left:10rpx"
									color="#999"
									type="arrowdown"
									size="16"
								></uni-icons>
							</view>
							<view class="datePicker" style="color: #666;">{{ reasons }}</view>
						</picker>
					</view>
				</view>
				<!-- 开始时间 -->
				<view class="formItem" style="margin-top: 20rpx;">
					<view class="leftLable">
						<text class="red">*</text>
						<text>开始时间</text>
					</view>
					<view class="rightInput">
						<uni-datetime-picker
							:disabled="punchId && addFormData.is_edit != 1"
							v-if="reload"
							@change="dateChangeS"
							placeholder="请选择开始时间"
							v-model="addFormData.start_time"
						/>
					</view>
				</view>
				<!-- 结束时间 -->
				<view class="formItem" style="margin-top: 20rpx;">
					<view class="leftLable">
						<text class="red">*</text>
						<text>结束时间</text>
					</view>
					<view class="rightInput">
						<uni-datetime-picker
							:disabled="punchId && addFormData.is_edit != 1"
							@change="dateChangeE"
							v-if="reload"
							placeholder="请选择结束时间"
							v-model="addFormData.end_time"
						/>
					</view>
				</view>
				<!-- 需要时长 -->
				<!-- <view class="formItem" style="margin-top: 20rpx;">
					<view class="leftLable"><text style="margin-left:25rpx">需要时长</text></view>
					<view class="rightInput" style="padding-right:40rpx">
						<view class="emptyReason" v-if="sumTime">{{ sumTime }}</view>
						<view class="emptyReason" v-else>自动计算</view>
					</view>
				</view> -->
				<!-- 请假事由 -->
				<view class="formItem" style="margin-top: 20rpx;border-bottom: none;">
					<view class="leftLable">
						<text class="red">*</text>
						<text>请假事由</text>
					</view>
				</view>
				<view class="textAreaBox">
					<textarea
						v-model="addFormData.remark"
						class="texta"
						:disabled="punchId && addFormData.is_edit != 1"
						placeholder="请输入请假理由"
						placeholder-style="font-size:26rpx;color:#999"
					/>
				</view>
				<!-- 照片上传 -->
				<view class="formItem" style="margin-top: 20rpx;border-bottom: none;">
					<view class="leftLable"><text style="margin-left:25rpx">照片上传</text></view>
				</view>
				<view class="upLoadImg">
					<view class="imgItem" style="margin-right: 10rpx;" v-for="item in imgList">
						<image
							@click="handleCheckOutImgItem(item)"
							class="imgItemI"
							:src="item"
						></image>
						<view
							class="closeBox"
							@click="removeImg(item)"
							v-if="!punchId || addFormData.is_edit == 1"
						>
							<uni-icons type="closeempty" color="#fff" size="20"></uni-icons>
						</view>
					</view>
					<!-- 上传按钮 -->
					<view
						class="upLoadBtn"
						v-if="!punchId || addFormData.is_edit == 1"
						@click="selectImg"
						style="margin-right: 10rpx;"
					>
						<uni-icons color="#999" type="plusempty" size="36"></uni-icons>
					</view>
				</view>
				<view
					class="formItem"
					style="margin-top: 20rpx;border-bottom: none;"
					v-if="isAprovel && addFormData.status == '0'"
				>
					<view class="leftLable"><text style="margin-left:25rpx">拒绝理由</text></view>
				</view>
				<view class="textAreaBox" v-if="isAprovel && addFormData.status == '0'">
					<textarea
						v-model="noReasons"
						class="texta"
						placeholder="请输入拒绝理由"
						placeholder-style="font-size:26rpx;color:#999"
					/>
				</view>
				<!-- 审批人员 -->
				<!-- <view class="formItem" style="margin-top: 20rpx;border-bottom: none;">
					<view class="leftLable"><text style="margin-left:25rpx">审批人员</text></view>
				</view>
				<view class="sendPeople">
					<image v-for="item in 3" class="peopleHeader" src="../../../static/client/tianjia.png" mode=""></image>
				</view> -->
			</view>
		</view>
		<!-- </scroll-view> -->
		<view class="bottom">
			<view v-if="!punchId" class="btnRow">
				<button
					class="bottom_btn"
					style="background: #CCCCCC;width: 50%;"
					@click="cancel"
					form-type="reset"
				>
					取消
				</button>
				<button
					class="bottom_btn"
					style="background: linear-gradient(0deg, #037CE3, #2EB3FF);width: 50%;"
					@click="handleAddSubmit"
					:disabled="submitDisable"
					form-type="submit"
				>
					提交
				</button>
			</view>
			<view v-if="punchId && isAprovel" class="btnRow">
				<!-- <button
					class="bottom_btn"
					style="background: #CCCCCC;width: 50%;"
					@click="handleCancel"
					:disabled="submitDisable"
					form-type="reset"
					v-if="addFormData.is_cancel == 1"
					:class="isAprovel && addFormData.is_cancel == 1 ? 'w25' : 'w50'"
				>
					撤回
				</button> -->
				<button
					v-if="isAprovel && addFormData.status == '0'"
					class="bottom_btn"
					style="background: #F0AD4E;width: 50%;"
					@click="handleAproval('2')"
					:disabled="submitDisable"
					form-type="reset"
					:class="isAprovel && addFormData.is_cancel == 1 ? 'w25' : 'w50'"
				>
					驳回
				</button>
				<button
					v-if="isAprovel && addFormData.status == '0'"
					class="bottom_btn"
					style="background: linear-gradient(0deg, #037CE3, #2EB3FF);width: 50%;"
					@click="handleAproval('1')"
					:disabled="submitDisable"
					form-type="submit"
					:class="isAprovel && addFormData.is_cancel == 1 ? 'w25' : 'w50'"
				>
					通过
				</button>
			</view>
			<view v-if="addFormData.is_edit == 1">
				<button
					class="bottom_btn"
					style="background: #DD524D;width: 100%;"
					@click="handleEditSubmit"
					:disabled="submitDisable"
					form-type="reset"
				>
					编辑
				</button>
			</view>
			<view v-if="addFormData.is_cancel == 1 && !isAprovel">
				<!-- <button
					class="bottom_btn"
					style="background: #CCCCCC;width: 100%;"
					@click="handleCancel"
					:disabled="submitDisable"
					form-type="reset"
					v-if="addFormData.is_cancel == 1"
					:class="isAprovel && addFormData.is_cancel == 1 ? 'w25' : 'w50'"
				>
					撤回
				</button> -->
			</view>
		</view>
	</view>
</template>

<script>
import uniDatetimePicker from '../../components/uni-datetime-picker/uni-datetime-picker.vue';
import StepLog from '../../components/step-log.vue';
export default {
	data() {
		return {
			submitDisable: false,
			tiemID: null,
			timeDou: 300,
			token: '',
			member_id: '',
			company_id: '',
			reload: true,
			reasons: '',
			reasonsLisr: ['事假', '婚假', '丧假', '产假', '病假'],
			// 图片上传数组
			imgList: [],
			//是否为审批人,现改为true,getAprovelStatus不生效
			isAprovel: true,
			addFormData: {
				type: '',
				start_time: '',
				end_time: '',
				remark: ''
			},
			punchId: '',
			noReasons: ''
		};
	},
	components: {
		StepLog
	},
	onShow() {
		this.submitDisable = false;
	},
	onLoad(options) {
		this.token = uni.getStorageSync('btlh_process_token') || '';
		this.member_id = uni.getStorageSync('btlh_process_member_id') || '';
		this.company_id = uni.getStorageSync('bthl_process_LoginCompanyId') || '';
		this.getAprovelStatus();
		if (options.punchId) {
			this.punchId = options.punchId;
			this.getPunchDetails();
		}
	},
	methods: {
		// 请假审批
		async handleAproval(val) {
			this.submitDisable = true;
			clearTimeout(this.tiemID);
			this.tiemID = setTimeout(async () => {
				const { data: res } = await this.$myRequest({
					url: 'ClockInApprove/leave_handle',
					method: 'POST',
					data: {
						member_id: this.member_id,
						token: this.token,
						company_id: this.company_id,
						id: this.punchId,

						status: val,
						reason: this.noReasons
					}
				});
				this.submitDisable = false;
				if (res.code != 200)
					return uni.showToast({
						title: res.datas.msg,
						icon: 'none'
					});
				uni.showToast({
					title: res.datas.msg,
					icon: 'none'
				});
				uni.navigateBack({
					delta: 1
				});
			}, this.timeDou);
		},
		// 请假撤回
		async handleCancel() {
			this.submitDisable = true;
			clearTimeout(this.tiemID);
			this.tiemID = setTimeout(async () => {
				const { data: res } = await this.$myRequest({
					url: 'ClockInApprove/leave_revoke',
					method: 'POST',
					data: {
						member_id: this.member_id,
						token: this.token,
						company_id: this.company_id,
						id: this.punchId
					}
				});
				this.submitDisable = false;
				if (res.code != 200)
					return uni.showToast({
						title: res.datas.msg,
						icon: 'none'
					});
				uni.showToast({
					title: res.datas.msg,
					icon: 'none'
				});
				uni.navigateBack({
					delta: 1
				});
			}, this.timeDou);
		},
		// 获取请假详情
		async getPunchDetails() {
			const { data: res } = await this.$myRequest({
				url: 'ClockInApprove/leave_detail',
				method: 'POST',
				data: {
					member_id: this.member_id,
					token: this.token,
					company_id: this.company_id,

					id: this.punchId
				}
			});
			this.submitDisable = false;
			if (res.code != 200)
				return uni.showToast({
					title: res.datas.msg,
					icon: 'none'
				});
			this.addFormData = res.datas.data;
			if (this.addFormData.pic) {
				this.imgList = this.addFormData.pic.split(',');
			}
			if (this.addFormData.type) {
				this.reasons = this.reasonsLisr[parseInt(this.addFormData.type)];
				console.log('this.reasons', this.reasons);
			}

			// 判断禁用
			if (this.addFormData.status != '0') {
				this.isDisable = true;
			}
		},
		// 编辑请假提交
		async handleEditSubmit() {
			this.submitDisable = true;
			clearTimeout(this.tiemID);
			this.tiemID = setTimeout(async () => {
				const { data: res } = await this.$myRequest({
					url: 'ClockInApprove/leave_edit',
					method: 'POST',
					data: {
						member_id: this.member_id,
						token: this.token,
						company_id: this.company_id,
						id: this.punchId,

						type: this.addFormData.type,
						remark: this.addFormData.remark,
						start_time: this.addFormData.start_time,
						end_time: this.addFormData.end_time,
						pic: this.imgList.join(',')
					}
				});
				this.submitDisable = false;
				if (res.code != 200)
					return uni.showToast({
						title: res.datas.msg,
						icon: 'none'
					});
				uni.showToast({
					title: res.datas.msg,
					icon: 'none'
				});
				uni.navigateBack({
					delta: 1
				});
			}, this.timeDou);
		},
		// 新增请假申请提交
		async handleAddSubmit() {
			this.submitDisable = true;
			clearTimeout(this.tiemID);
			this.tiemID = setTimeout(async () => {
				const { data: res } = await this.$myRequest({
					url: 'ClockInApprove/leave_apply',
					method: 'POST',
					data: {
						member_id: this.member_id,
						token: this.token,
						company_id: this.company_id,

						type: this.addFormData.type,
						remark: this.addFormData.remark,
						start_time: this.addFormData.start_time,
						end_time: this.addFormData.end_time,
						pic: this.imgList.join(',')
					}
				});
				this.submitDisable = false;
				if (res.code != 200)
					return uni.showToast({
						title: res.datas.msg,
						icon: 'none'
					});
				uni.showToast({
					title: res.datas.msg,
					icon: 'none'
				});
				uni.navigateBack({
					delta: 1
				});
			}, this.timeDou);
		},
		// 判断是不是审批人
		async getAprovelStatus() {
			const { data: res } = await this.$myRequest({
				url: 'ClockInApprove/is_approver',
				method: 'POST',
				data: {
					member_id: this.member_id,
					token: this.token,
					company_id: this.company_id
				}
			});
			if (res.code != 200)
				return uni.showToast({
					title: res.datas.msg,
					icon: 'none'
				});
			if (res.datas.is_leave_admin == '1' || res.datas.is_department_head == '1') {
				this.isAprovel = true;
			}
		},
		// 上传图片
		selectImg() {
			var that = this;
			uni.chooseImage({
				count: 6, // 最多可以选择的图片张数，默认9
				sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有
				sourceType: ['album', 'camera'], //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
				success: async res => {
					const tempFilePaths = res.tempFilePaths;
					that.phone = res.tempFilePaths[0];
					tempFilePaths.forEach(item => {
						uni.uploadFile({
							url: 'https://control.sxpz.vip/index.php/AppApi/User/uploadImg',
							filePath: item,
							name: 'file',
							formData: {
								member_id: this.member_id,
								token: this.token
							},
							success: uploadFileRes => {
								const result = JSON.parse(uploadFileRes.data);
								console.log(result);
								if (result.code != 200)
									return uni.showToast({
										title: result.datas.msg,
										icon: 'none'
									});
								this.imgList.push(result.datas.img_url);
								console.log(this.imgList);
							}
						});
					});
				}
			});
		},
		bindResonsChange(e) {
			// console.log(e);
			this.reasons = this.reasonsLisr[e.detail.value];
			this.addFormData.type = e.detail.value;
		},
		// 查看图片详情
		handleCheckOutImgItem(val) {
			uni.previewImage({
				current: val,
				urls: this.imgList,
				loop: true
			});
		},
		// 移除上传图片
		removeImg(item) {
			const index = this.imgList.findIndex(img => img == item);
			// console.
			if (index != -1) {
				this.imgList.splice(index, 1);
			}
		},
		cancel() {
			uni.navigateBack({
				delta: 1
			});
		},
		dateChangeS(data) {
			this.addFormData.start_time = data;
			console.log('开始时间选择', this.addFormData.start_time);
		},
		dateChangeE(data) {
			this.addFormData.end_time = data;
			console.log('结束时间选择', this.addFormData.end_time);
		},
		// 点击请假记录(前往请假记录页面)
		goHistoryPage() {
			uni.navigateTo({
				url: `/packageAdmin/pages/punchCard/applicationHistory`
			});
		}
	},
	computed: {
		sumTime() {
			var stime = new Date(this.addFormData.start_time).getTime();
			var etime = new Date(this.addFormData.end_time).getTime();

			var usedTime = etime - stime; //两个时间戳相差的毫秒数
			var days = Math.floor(usedTime / (24 * 3600 * 1000));
			//计算出小时数
			var leave1 = usedTime % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
			var hours = Math.floor(leave1 / (3600 * 1000));
			//计算相差分钟数
			var leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
			var minutes = Math.floor(leave2 / (60 * 1000));
			var time = days + '天' + hours + '时' + minutes + '分';
			// var time = days;
			if (stime > etime) {
				this.reload = false;
				uni.showToast({
					title: '开始时间不能大于结束时间',
					icon: 'none'
				});
				this.addFormData.start_time = '';
				this.addFormData.end_time = '';
				setTimeout(() => {
					this.reload = true;
				}, 500);
			}
			if (this.addFormData.start_time == '' || this.addFormData.end_time == '') {
				return '';
			} else {
				return time;
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.hintRow {
	background-color: #fd9801;
	color: #fff;
	font-size: 26rpx;
	padding: 10rpx;
}
.formItem {
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-sizing: border-box;
	border-bottom: 1px solid #efefef;
	padding: 20rpx 20rpx;
	.leftLable {
		display: flex;
		align-items: center;
		color: #333;
		.red {
			color: red;
			margin-right: 10rpx;
		}
	}
	.rightInput {
		font-size: 26rpx;
		color: #999;
		.emptyReason {
			font-size: 26rpx;
		}
	}
}
.textAreaBox {
	width: 100%;
	box-sizing: border-box;
	padding: 0 30rpx;
	z-index: 90 !important;
	position: relative;
	height: 255rpx;
	.texta {
		position: absolute;
		box-sizing: border-box;
		width: 100%;
		font-size: 28rpx;
		height: 255rpx;
		background: #f7f7f7;
		padding: 30rpx;
		border-radius: 20rpx;
		z-index: 90 !important;
	}
}
// 上传图片
.upLoadImg {
	position: relative;
	width: 100%;
	box-sizing: border-box;
	padding: 0 30rpx;
	display: flex;
	flex-wrap: wrap;
	.upLoadBtn {
		width: 120rpx;
		height: 120rpx;
		border-radius: 10rpx;
		border: 1px solid #999;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.imgItem {
		position: relative;
		width: 120rpx;
		height: 120rpx;
		margin-bottom: 20rpx;
		.imgItemI {
			width: 120rpx;
			height: 120rpx;
		}
		.closeBox {
			width: 30rpx;
			height: 30rpx;
			position: absolute;
			background-color: #007aff;
			display: flex;
			justify-content: center;
			align-items: center;
			right: 0;
			top: 0;
		}
	}
}
.sendPeople {
	padding: 0 30rpx;
	display: flex;
	flex-wrap: wrap;
	.peopleHeader {
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
		margin-right: 10rpx;
	}
}
.bottomBar {
	position: relative;
	box-sizing: border-box;
	margin: 50rpx 0;
	padding: 0 100rpx;
	display: flex;
	align-items: center;
	justify-content: space-around;
	/deep/.step {
		position: absolute;
		right: 0rpx;
	}
}

// 修改日期组件
/deep/.uni-date-x--border {
	border: none;
}
/deep/.uni-date-x {
	justify-content: flex-end !important;
}
/deep/.uni-date__icon-logo {
	display: none;
}
/deep/.uni-date__input {
	width: initial !important;
	text-align: right;
	font-size: 26rpx;
	padding-right: 30rpx;
	color: #999;
}

/deep/.uni-calendar__mask {
	// bottom: 88rpx !important;
}
/deep/ .uni-calendar__content {
	z-index: 999 !important;
}
/deep/.uni-calendar--fixed {
	// bottom: 88rpx !important;
	z-index: 999 !important;

	.uni-date-changed {
		position: relative;
		z-index: 1000 !important;
		.uni-calendar__header {
			z-index: 999 !important;
		}
	}
}
.bottom {
	width: 100%;
	height: 88rpx;
	position: fixed;
	position: absolute;
	bottom: 0;
	z-index: 80 !important;
	overflow: hidden;
	// z-index: 99;
}
.btnRow {
	display: flex;
	// position: relative;
	// width: 375rpx;
	z-index: 80 !important;
}
.bottom_btn {
	// position: absolute;
	// width: 375rpx;
	z-index: 80 !important;
	height: 88rpx;
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: 500;
	border-radius: 0;
	border: none;
	color: #ffffff;
	display: flex;
	justify-content: center;
	align-items: center;
}
.bottom_btn::after {
	border: none;
}
.w50 {
	width: 50%;
}
.w25 {
	width: 33%;
}
/deep/.uni-date__icon-clear {
	display: none !important;
}
</style>
